<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta content="yes" name="apple-touch-fullscreen">
		<style type=text/css>
		body
		{
			background-color: #c4c4c4;
			font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
  			font-size: 10.5pt;
      		margin: 0px;
		}
		.main
		{
			max-width:720px;
			margin: 0 auto;
			height: 100%;
			padding-top: 54px; /* header */
			padding-bottom: 20px; /* footer */
			background-color: #ebebeb;
		}
		.header
		{
			position: fixed;
			top:0;
			max-width:720px;
			width: 100%;
			height: 48px;
			background-color: #f6f6f6;
			z-index: 99999999;
		}
		.sname
		{
			padding-left: 12px;
			vertical-align: middle;
			height: 48px;
			line-height: 48px;
			font-weight: bold;
		}
		.msgfilter
		{
			float:right;
			height: 48px;
			line-height: 48px;
			padding-right: 8px;
		}
		.filter-btn
		{
			vertical-align: middle;
		}
		.footer
		{
			position: fixed;
			bottom: 0;
			max-width:720px;
			width: 100%;
			height: 20px;
			z-index: 99999999;
		}
		
		.msgs
		{
			width: 100%;
			height: 100%;
		}
	  	.chat-left, .media-left
	  	{
			clear:both;
			overflow: auto;
			margin:0 auto;
			padding: 8px 8px;
	  	}
		.chat-left div.avatar-box,
		.media-left div.avatar-box
		{
			float: left;
		}
		.chat-left div.avatar-box
		{
			padding-top: 14px;
		}
		.chat-left div.nt-box,
		.media-left div.nt-box
		{
			margin: 0 50px 2px 50px;
			padding: 0px;
			color: #848484;
			font-size: 80%;
			text-align: left;
		}
		.chat-left div.content-box
		{
			position: relative;
			background-color: white;
			/*float: left;*/
			margin: 0 50px 10px 50px;
			padding: 10px 10px 10px 10px;
			border-radius:8px;
		}
		.media-left div.content-box
		{
			/*float: left;*/
			margin: 0 50px 10px 50px;
			padding: 10px 10px 10px 10px;
    	}
	    div.content-box
	    {
	      width:fit-content;
	      width:-webkit-fit-content;
	      width:-moz-fit-content;
	    }
		.chat-left.channels .content-box, .chat-right.channels .content-box
		{
			width:240px;
		}
		.refermsg
		{
			font-size: 90%;
		}
		
		.chat-right, .media-right
		{
			clear:both;
			overflow: auto;
			max-width: 670px;
			margin: 0 auto;
			background-color: #ebebeb;
			padding: 8px 8px 8px 58px;
		}
		.chat-right div.avatar-box,
		.media-right div.avatar-box
		{
			float: right;
		}
		.chat-right div.nt-box,
		.media-right div.nt-box
		{
			margin: 0px 50px 2px 50px;
			padding: 0px;
			color: #848484;
			font-size: 80%;
			text-align: right;
		}
		.chat-right div.content-box
		{
      		position: relative;
			background-color: #b2e281;
			margin: 0px 50px 10px auto;
			padding: 10px 10px 10px 10px;
			border-radius: 8px;
		}
		.media-right div.content-box
		{
			float: right;
			margin: 0px 0px 10px 50px;
			padding: 10px 10px 10px 10px;
		}
		
		.name-right
		{
			display: none;
		}
		img.avatar
		{
			width: 40px;
			height: 40px;
			border-radius: 4px;
		}
		
		.triangle
		{
			height: 0px;
			width: 0px;
			border-width: 6px;
			border-style: solid;
			position: relative;
		}
		.chat-left .triangle
		{
			position: absolute;
			border-color: transparent white transparent transparent;
			left: -12px;
			top: 12px;
		}
		.chat-right .triangle
		{
			position: absolute;
			border-color: transparent transparent transparent #b2e281;
			right: -12px;
			top: 12px;
		}
		
		.chat-notice
		{
			clear: both;
			font-size: 80%;
			text-align: center;
			margin-top: 15px;
			margin-bottom: 15px;
			margin:0 auto;
			padding: 0px 8px;
    	}
    	.chat-notice .content-box
		{
			width: 80%;
			margin:0 auto;
		}
		.chat-notice.fmsgtag .content-box
		{
			background-color: #008080;
			border-radius: 4px;
			font-size: 100%;
			padding: 5px 10px;
			color: white;
		}
		audio
		{
			max-width: 220px;
		}
		video
		{
			max-width: 240px;
			border-radius: 8px;
		}
		.image
		{
			width:90px;
			/*transition: all 2s;*/
			border-radius:8px;
			max-width: 360px;
			max-height: 240px;
			min-width: 120px;
			min-height: 24px;
		}
		img
		{
			image-orientation: from-image;
		}
		img[src=""]
		{
			display: none;
		}
		img.app-icon
		{
			width: 24px;
			height: 24px;
			vertical-align:middle;
			border-radius: 2px;
		}
		img.channel-poster
		{
			object-fit: cover;
			width: 240px;
			height: 240px;
		}
		.image:hover, .channel-poster:hover
		{
			cursor: crosshair;
		  	/* transform: scale(5); */
		}
		
		img.card-avatar
		{
			width: 42px;
			height: 42px;
			vertical-align:middle;
		}
		div.card-name
		{
			display: flex;
			align-items:center;
		}
		div.card-name span
		{
			margin-left: 8px;
		}
		span.channel-title
		{
			margin-left: 2px;
		}
		div.card-type
		{
			border-top: 1px dotted #dedede;
			margin: 10px 2px 2px 2px;
			padding: 4 12px 8px 0px;
			line-height: 1.6;
		}
		.contact-card .card-avatar
		{
			border-radius: 4px;
		}
		.channel-card .card-avatar
		{
			border-radius: 21px;
		}
		span.channel-title
		{
			overflow: hidden;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			white-space: nowrap;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			word-break: break-all;
			width: 300px;
			display:block;
		}
		.appinfo
		{
			/*padding-top: 12px;*/
		}
		.app-name
		{
			padding-left: 4px;
			color: #999;
			font-size: 80%;
		}
		
		.dont-break-out
		{
			overflow-wrap: break-word;
			word-wrap: break-word;
			
			-ms-word-break: break-all;
			/*word-break: break-all;*/
			word-break: break-word;
			-ms-hyphens: auto;
			-moz-hyphens: auto;
			-webkit-hyphens: auto;
			hyphens: auto;
		}
  
		</style>
		<title>%%DISPLAYNAME%% - 微信聊天记录</title>
	</head>
	<body uid="%%USRNAME%%" sid="%%SESSION_USRNAME%%">
		<div class="main">
			<div class="header">
				<span class="sname">%%DISPLAYNAME%%</span>
				<div class="msgfilter">
					<img width="24" border="0" alt="显示所有消息" id="filter-none" class="filter-btn" src="" />
					&nbsp;
					<img width="24" border="0" alt="只显示照片" id="filter-image" class="filter-btn" src="" />
					&nbsp;
					<img width="24" border="0" alt="只显示视频" id="filter-video" class="filter-btn" src="" />
				</div>
			</div>
			<div class="msgs" id="msgs-div">
%%BODY%%
			</div>
			<div class="footer">
	
			</div>
		</div>

  </body>
  %%LOADING_SCRIPTS%%

  <script language="javascript">

    function showElements(msgType)
    {
      var msgElements = document.querySelectorAll('div.msg');
      if (null == msgElements || msgElements.length == 0)
      {
        return;
      }

      for (idx = 0; idx < msgElements.length; idx++)
      {
        msgElements[idx].style.display = ((msgType == null) || msgElements[idx].getAttribute("msgtype") == msgType) ? "block" : "none";
      }
    }

    document.getElementById("filter-none").addEventListener("click", function() {
      showElements(null);
    });

    document.getElementById("filter-image").addEventListener("click", function() {
      showElements("image");
    });

    document.getElementById("filter-video").addEventListener("click", function() {
      showElements("video");
    });

  </script>

</html>
